<template>
    <div>
        <h1>toRaw和markRaw</h1>
        <button @click="testToRaw()">点击</button>
        <h2>{{state.name}}</h2>
        <h2>{{state.like}}</h2>
    </div>
    
</template>
<script lang="ts">
import {defineComponent,  reactive,  ref ,  toRefs,toRaw,markRaw} from 'vue'
interface Jian{
    name:string,
    age:number,
    like?:string[]
}
export default defineComponent({
    name:"建哥",
    setup() {
        const state = reactive<Jian>({
            name:"建哥",
            age:20,

        })

        const testToRaw = (): void=>{
            //! toRaw将代理对象转换为普通对象并返回  原来的对象还是响应式的  当改原来的数据示 旧的写上时也会改变

            // const user = toRaw(state);
            // user.name += "====";
            // state.name += "===="


            //? 被markRaw标记的对象不能再是响应式的
            state.like = markRaw<string[]>(["价格","建哥"])
            console.log(state.like);//["价格", "建哥", __v_skip: true]
            
            setInterval(()=>{
                if(state.like?.length){
                    state.like[0] += "=="
                }
            },1000)
        }

        return {
            state,
            testToRaw
        }
    },
    directives:{
        jian(el,bind){
        }
    }
})

</script>
